<!--  -->
<template>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
      <!--  :page-size= 显示每页显示多少条 
          :total="400" 总条数
          :current-page 当前页码数 默认数量是1
           :page-sizes="[100, 200, 300, 400]" 每页显示多少数据
          layout="total, sizes, prev, pager, next, jumper"    组件布局，子组件用逗号分割  string 


组件传值
在Vue.js中，组件之间的通信主要有两种方式：通过 props 向子组件传递数据，通过事件向父组件传递数据。其中，this.$emit 就是用于向父组件发送事件的方法。

子组件可以向父组件传递任意多个事件，只要事件的名字不同即可。

在Vue.js中，你可以使用`this.$emit('eventName', data)`来触发事件，并传递数据。其中，'eventName'是你自定义的事件名称，可以是任何字符串。你可以用不同的事件名来区分不同的事件。

例如，假设你有一个子组件，它有两个按钮，一个是"保存"按钮，一个是"取消"按钮。你可以为这两个按钮定义两个不同的事件：

```javascript
methods: {
  save() {
    this.$emit('save', 'some data');
  },
  cancel() {
    this.$emit('cancel');
  }
}
```

然后在父组件中，你可以分别监听这两个事件：

```html
<child-component @save="handleSave" @cancel="handleCancel"></child-component>
```
在这个例子中，当用户点击"保存"按钮时，子组件会触发一个名为'save'的事件，并传递一个参数'some data'。当用户点击"取消"按钮时，子组件会触发一个名为'cancel'的事件。

父组件可以通过事件名来区分这两个事件，并为每个事件提供一个处理函数。这样，当事件发生时，父组件可以根据事件的类型和传递的数据来执行相应的操作。

总的来说，你可以在子组件中定义任意多个事件，只要它们的名字不同即可。然后你可以在父组件中监听这些事件，并为每个事件提供一个处理函数。

     -->
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 100,
    },

    pageSize: {
      type: Number,
      default: 20,
    },
  },

  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`, val);
      this.$emit("sizeChange", val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      this.$emit("currentChange", val);
    },
  },
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 1,
    };
  },
};
</script>
<style scoped></style>
